<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
  <title>测试</title>
  <link rel="stylesheet" href="{{ asset('css/2018/weui.min.css') }}">


<style>
@media only screen and (min-width: 425px) {
  #wrap {
    width: 425px;
    margin: 0 auto;
    border: 1px solid #cccccc;
    min-height: 300px;
    background-color: #ffffff;
    position: absolute;
    font-size: 14px;
    left: 50%;
    margin-left: -212px;
    padding: 25px 15px;
  }
}

#wrap {
  width: 96%;
  margin: 0 auto;
  border: 1px solid #cccccc;
  min-height: 300px;
  background-color: #ffffff;
  position: absolute;
  font-size: 14px;
  padding: 25px 2%;
}

.clear {
  margin: 25px 0;
}
</style>

<body>
  <div id="wrap">
    <div class="clear">
      <span class="weui-btn weui-btn_primary">测试</span>
    </div>

    <div class="clear">
      <div class="weui-slider-box">
        <div class="weui-slider">
          <div id="sliderInner" class="weui-slider__inner">
            <div id="sliderTrack" style="width: 50%;" class="weui-slider__track"></div>
            <div id="sliderHandler" style="left: 50%;" class="weui-slider__handler"></div>
          </div>
        </div>
        <div id="sliderValue" class="weui-slider-box__value">50</div>
      </div>
    </div>

    <div class="clear">
      <div class="weui-toast" style="display: none;">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">数据加载中</p>
      </div>
    </div>

    <div class="clear">
      <div class="image" style="display: none;">
        <img src="" alt="" style="width: 100%;">
      </div>
    </div>



  </div>



<script src="{{ asset('js/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/2018/jweixin-1.2.0.js') }}"></script>
<script type="text/javascript">

$(".weui-btn").click(function(event) {
  /* Act on the event */
  $(".weui-toast").show();

  window.setTimeout(function(){
    $(".weui-toast").hide();

    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
        $(".image").find('img').attr('src',localIds[0]);
        $(".image").show();
      }
    });

  },5000); 

});

wx.config(<?php echo $jweixin->config(['chooseImage'], false) ?>);
wx.ready(function(){
  console.log('准备好了');

  wx.checkJsApi({
    jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
    success: function(res) {
      // 以键值对的形式返回，可用的api值true，不可用为false
      // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
      console.log(res);
    },
    fail: function() {
      console.log('No');
    }
  });

});
wx.error(function(res){
  // console.log(res);
});

</script>
</body>
</html>